<template>
  <div id="app">
    <div class="box">
      <!-- tag标签区 -->
      <template v-for="(item,index) in selectedRows">
        <a-tag :key="item.name" closable :index="index" @close="()=>delUser(item.id)">{{item.name}}</a-tag>
      </template>
      <div class="btn">
        <!-- 确定按钮 -->
        <a-button @click="showConfirm" type="primary">确定提交</a-button>
      </div>
      <!-- 用户对话弹出框 -->
      <a-modal v-model="visible" title="Users Modal" okText="确定" cancelText="取消" @ok="selectUsers">
        <a-table
          row-key="id"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,selections:true}"
          :columns="columns"
          :data-source="data"
          :pagination="{pageSize:5}"
        />
      </a-modal>
    </div>
  </div>
</template>

<script>
//导入json数据
import data from "./server";
export default {
  data() {
    return {
      data,
      //对话框状态
      visible: true,
      //表格配置
      columns: [
        {
          title: "ID",
          dataIndex: "id"
        },
        {
          title: "NAME",
          dataIndex: "name"
        }
      ],
      //选中项id
      selectedRowKeys: [],
      //选中项
      selectedRows: []
    };
  },
  methods: {
    //删除指定tag
    delUser(id) {
      //过滤所有不为选中的那项
      let tags = this.selectedRows.filter(item => item.id !== id);
      let keys = this.selectedRowKeys.filter(item => item !== id);
      //重新组成新数组
      this.selectedRows = tags;
      this.selectedRowKeys = keys;
    },
    //确定提交回调
    showConfirm() {
      //开关弹出框
      this.visible = !this.visible;
    },
    //选中项
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    //users对话框点击确定回调
    selectUsers() {
      this.visible = false;
    }
  }
};
</script>
<style scoped>
.box {
  width: 30%;
  height: 20%;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.btn {
  margin-top: 10%;
}
</style>